<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<title>bt4vue</title>
	<link rel="stylesheet" href="node_modules/bootstrap/dist/css/bootstrap.css">
</head>
<body>
<div id="app">
	<alert :visible="alertShow" :close-able="alertBtn" @close-bs-alert="whenAlertClose" @closed-bs-alert="afterAlertClose">
		<slot>
			<h4 class="alert-heading">Well done!</h4>
			<p>Aww yeah, you successfully read this important alert message. This example text is going to run a bit
				longer so that you can see how spacing within an alert works with this kind of content.</p>
			<hr>
			<p class="mb-0">Whenever you need to, be sure to use margin utilities to keep things nice and tidy.</p>
		</slot>
	</alert>
</div>
<script src="node_modules/vue/dist/vue.js"></script>
<script src="dist/bt4vue.js"></script>
<script>
	var app = new Vue({
		el: "#app",
		data: {
			alertShow: true,
			alertBtn: true
		},
		methods: {
			whenAlertClose: function() {
				alert("警告框关闭中。。。。");
			},
			afterAlertClose: function() {
				alert("警告框已经关闭了");
			}
		},
		computed: {},
		watch: {}
	});
</script>
</body>
</html>
